<template>
    <div>
        <uni-popup ref="adSelect" type="bottom">
            <div class="ad_select_container">
                <div class="close" @click="close"><i class="icon-close"></i></div>
                <div class="ad_nav">
                    <p class="ad_type_item"
                        @click="selectAdType(i)"
                        :class="{active: i.value == actAdType }"
                        v-for="(i, idx) in adTypeList" 
                        :key="idx">{{i.name}}</p>
                </div>
                <p class="ad_desc">
                    <span v-if="actAdType == 'mini'"> 直达小程序、商品详情页 </span>
                    <span v-if="actAdType == 'link'"> 官网/微官网、H5链接 </span>
                    <span v-if="actAdType == 'product'"> 淘宝/京东/抖音/拼多多、复制商品链接 </span>
                    <span v-if="actAdType == 'img'"> 公众号/小程序码、微信/群二维码、海报/其它 </span>
                </p>
                <scroll-view scroll-y class="ad_list" @scrolltolower="scrolltoBottom">
                    <adItem v-for="(item, index) in list" :key="index" :item="item" @click="selectAd(item)" opType="insert"></adItem>
                    <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
                    <div class="wfull h100"></div>
                    <div class="edit_ad_list" @click="toEdit">新增广告</div>
                </scroll-view>
            </div>
        </uni-popup>

        <pub-fast-picker ref="fastPicker"></pub-fast-picker>

        <!-- <uni-popup ref="setType" type="bottom">
            <div class="set_type_list">
                <div class="title">选择广告位</div>
                <p @click="confirmSet()">仅在当前的{{type}}</p>
                <p @click="confirmSet('all')">在全部的{{type}}</p>
            </div>
        </uni-popup> -->
    </div>
</template>

<script>
import adItem from '@/components/pages/adItem'
import { getUserAdverts, userDefaultAdvert } from '@/request/ad'
export default {
    components: {
        adItem
    },
    data() {
        return {
            promiseResolve: null,
            setTypePromiseResolve: null,
            actAdType: 'mini',
            adTypeList: [
                { name: '小程序', value: 'mini' },
                { name: '链接', value: 'link' },
                { name: '商品', value: 'product' },
                { name: '图片', value: 'img' },
            ],
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            }
        }
    },
    props: {
        type: {
            type: String,
            default: '文章'
        },
        adPosPick: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        
        // setTimeout(() => {
        //     this.open()
        // })
    },
    methods: {
        open() {
            return new Promise(async (resolve, reject) => {
                this.promiseResolve = resolve
                this.setTypePromiseResolve = null
                this.$refs.adSelect.open()
                this.onRefresh()
            })
        },
        scrolltoBottom() {
            this.onInfinite()
        },
        getList(complete) {
            getUserAdverts({
                advertType: {
                    'link': '01',
                    'product': '00',
                    'img': '02',
                    'mini': '03',
                }[this.actAdType],
                keyWord: '',
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
        close() {
            this.$refs.adSelect.close()
        },
        selectAdType(i) {
            this.actAdType = i.value
            this.onRefresh()
        },
        async selectAd(item) {
            await this.$checkVip()
            let rst = {}
            if(this.adPosPick) {
                rst = await this.$refs.fastPicker.pick({
                    title: '选择广告位',
                    options: [
                        {name: '仅仅在当前的' + this.type , value: 'current'},
                        {name: '在全部的' + this.type , value: 'all'},
                    ]
                })
            }
            console.log(rst);
            if(rst.value == 'all') {
                await userDefaultAdvert({
                    advertId: item.id
                })
                this.promiseResolve(item = {
                    ...item,
                    isAll: true,
                })
            } else {
                this.promiseResolve(item)
            }
            this.close()
        },
        async confirmSet(type) {
            if(type == 'all') {
                await userDefaultAdvert({
                    advertId: this.setAdId
                })
                this.setTypePromiseResolve(true)
            } else {
                this.setTypePromiseResolve()
            }
        },
        toEdit() {
            let url = '/pages/advert/newAd?type=' + this.actAdType
            this.$navigate.to(url)
        }

        

    }

}
</script>

<style lang="less" scoped>
.ad_select_container{
    width: 100%;
    height: 75vh;
    background: #f1f1f1;
    position: relative;
    display: flex;
    flex-direction: column;
    .close{
        position: absolute;
        top: 5rpx;
        right: 5rpx;
        width: 80rpx;
        height: 80rpx;
        background: #fff;
        color: #ccc;
        .align(center);
        
    }
    .ad_nav{
        width: 100%;
        background: #fff;
        height: 90rpx;
        border-bottom: 1px solid #ddd;
        padding: 0 30rpx;
        .align(v-center);
        .ad_type_item{
            height: 100%;
            line-height: 90rpx;
            padding: 0 30rpx;
            font-size: 34rpx;
            position: relative;
            &.active{
                color: @mainColor;
                font-weight: bold;
                &::after{
                    content: "";
                    width: 40rpx;
                    height: 6rpx;
                    background: @mainColor;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    margin-left: -20rpx;
                }
            }
        }
    }
    .ad_desc{
        padding: 20rpx 30rpx 0;
        background: #fff;
        line-height: 30rpx;
        font-size: 26rpx;
        color: #999;

    }
    .ad_list{
        flex: 1;
        height: 100rpx;
        position: relative;
        .edit_ad_list{
            position: absolute;
            bottom: 20rpx;
            left: 75rpx;
            width: 600rpx;
            height: 80rpx;
            border-radius: 40rpx;
            background: @mainColor;
            color: #fff;
            .align(center);
        }
    }
}

// .set_type_list{
//     background: #fff;
//     padding-bottom: 20rpx;
//     border-radius: 30rpx 30rpx 0 0;
//     .title{
//         width: 100%;
//         text-align: center;
//         line-height: 80rpx;
//         font-weight: bold;
//         font-size: 34rpx;
//         color: #666;
//     }
//     p{
//         line-height: 100rpx;
//         text-align: center;
//         border-top: 1rpx solid #eee;
        
//     }

// }
</style>